<template>
	<view id="box">
		<!-- <roc-scroll @loadData="loadData" :visible_height="visible_height" :hasMore="hasMore"
			refresher_background="#f5f5f5" :data_number="data_number" :solt_height="solt_height" background="#f5f5f5"
			footer_background="#f5f5f5">
			<view slot="data-content"> -->
			
				<custom-waterfalls-flow ref="waterfallsFlowRef" :value="strateList" @wapperClick="wapperClick" @imageClick="imageClick" @loaded="finish">
					<!-- #ifdef MP-WEIXIN -->
					<view class="item" slot="slot{{index}}">
						<view class="title">{{item.content}}</view>
						<view class="user-info">
							<view class="user-name">
								<image :src="item.avatar?item.avatar:$util.baseheader" mode=""></image>
								<view>{{item.nickname}}</view>
							</view>
							<view class="zan-num">{{item.like_num}}</view>
						</view>
					</view>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<template v-slot:default="item">
						<view class="item">
							<view class="title">{{item.content}}</view>
							<view class="user-info">
								<view class="user-name">
									<image  :src="item.avatar?item.avatar:$util.baseheader" mode=""></image>
									<view>{{item.nickname}}</view>
								</view>
								<view class="zan-num">{{item.like_num}}</view>
							</view>
						</view>
					</template>
					<!-- #endif -->
				</custom-waterfalls-flow>
			<!-- </view>
		
		</roc-scroll> -->
	</view>
</template>

<script>
	export default {
		name: "strategyList",
		props: {
			keywords: {
				type: String,
				default: ""
			},
			category_id: {
				type: [Number,String],
				default: 0
			},
			city: {
				type: String,
				default: ''
			},
			page1: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				// 滚动数据初始化
				visible_height: 60,
				solt_height: 0,
				hasMore: true,
				strateList: [],
				page:this.page1,
				data_number: 0,
			};
		},
		watch:{
			category_id:function(newvalue,oldvalue){
				this.loadData(1)
			},
			page1:function(newvalue,oldvalue){
				this.page = newvalue
				this.loadData(1)
			},
			
		},
		mounted() {
			this.loadData(0)
		},
		onReachBottom() {
			this.loadData(0)
		},
		methods: {
			upload(){
				this.loadData(1)
			},
			toAllList(){
				uni.navigateTo({
					url: '/otherpages/travelStrategy/strategyList'
				})
			},
			loaded() {
				// console.log('加载完成')
			},
			wapperClick(item) {
				uni.navigateTo({
					url:"/otherpages/video/index/index?id="+item.id
				})
			},
			imageClick(item) {
				uni.navigateTo({
					url:"/otherpages/video/index/index?id="+item.id
				})
			},
			reset() {
				this.$refs.waterfallsFlowRef.refresh();
			},
			finish(){
				this.$nextTick(()=>{
					const query = uni.createSelectorQuery().in(this);
					query.select('#box').boundingClientRect(data => {
						this.$emit('setData',{
							height:data.height,
							key:'height1'
						})
					}).exec();
				})
			},
			loadData(type){
				if(type == 1){
					this.page = 1
					this.strateList = []
				}
				let that = this
				this.request.httpTokenRequest({
					url: "tour/index",
					method: "get"
				}, {
					city:this.city,
					page: this.page,
					key : this.keywords,
					category_id:this.category_id
				}).then(res => {
					if (res.code == 0) {
						if(this.page1 >=1){
						}else{
							this.page++
						}
						if (res.data.data.length < res.data.data.per_page)this.hasMore = false;
						this.strateList = [...this.strateList,...res.data.data];
						this.$refs.waterfallsFlowRef.refresh()
						this.data_number = this.strateList.length
						
						uni.hideLoading()
						
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			}
		}

	}
</script>

<style lang="scss">
	.item {
		padding: 10rpx 20rpx;
	}

	.title {
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #363737;
		line-height: 40rpx;
		transform: scale(0.9);
		transform-origin: 0 0;
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.user-info {
		display: flex;
		align-items: center;
		font-size: 20rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #656667;
		line-height: 28rpx;
		justify-content: space-between;
		margin-top: 18rpx;

		.user-name {
			display: flex;
			align-items: center;
			font-size: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #656667;
			line-height: 28rpx;

			image {
				width: 28rpx;
				height: 28rpx;
				border-radius: 50%;
				margin-right: 6rpx;
			}
		}

	}
</style>